﻿@page "/components/badge"

<DocsPage>
    <DocsPageHeader Title="Badge">
                    <Description>A badge is a useful way to wrap or overlay an action button or icon with a simple notification, making it easy to emphasize things like the number of notifications received.</Description>
    </DocsPageHeader>
            
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader Title="Usage">
                <Description></Description>
            </SectionHeader>
            <SectionContent Outlined="true" DisplayFlex="true">
                <BadgeBasicExample />
            </SectionContent>
            <SectionSource ShowCode="false" Code="BadgeBasicExample" GitHubFolderName="Badge" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Playground">
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <BadgeInteractiveExample />
            </SectionContent>
            <SectionSource ShowCode="false" Code="BadgeInteractiveExample" GitHubFolderName="Badge" />
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>
